<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        
        <script type="text/javascript" src="js/cordova.js"></script>
        
        
        <!-- jquery -->

        
        <!-- <link rel="stylesheet" type="text/css" href="css/jquery/jquery.mobile-1.4.0-rc.1.css" /> -->
        
        <link rel="stylesheet" type="text/css" href="css/jquery/jquery.mobile.icons.min.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery/MetroJs.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery/samTheme02.min.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery/jquery.mobile.structure-1.4.0-rc.1.min.css" />
        
        <script type="text/javascript" src="js/jquery/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/jquery/MetroJs.min.js"></script>
        <script type="text/javascript" src="js/jquery/jquery.mobile-1.4.0-rc.1.min.js"></script>
        
        <title>Testing App</title>
    </head>
    
<body>
	<div data-role="page">
		<div data-role="header" data-theme="a" data-position="fixed" >
			<a href="#mypanel" id="navIcon" data-icon="bars" data-iconpos="notext" ></a>
		    <h1>Dashboard</h1>
		</div><!-- /header -->
		
		<div data-role="panel" id="mypanel" data-position="left" data-display="overlay" class="ui-panel ui-panel-position-left ui-panel-display-overlay ui-body-a ui-panel-animate ui-panel-closed ui-responsive-panel ui-nodisc">
        			<ul id="sidebuttons" data-theme="a">
        			</ul>
        			<ul id="sidePanel" class="clleft" data-theme="a" data-role="listview">
        				<li data-role="list-divider" class="ui-li ui-li-divider ui-bar-d ui-first-child" data-role="a" >Menu</li>
        				<li data-role="list-divider"><a href="#"><i class="icon-home"></i></a></li>
        				<li id="active"><a href="#"><i class="icon-home"></i> Home</a></li>
        				<li><a href="calendar.html"><i class="icon-lightbulb"></i>Calendar</a></li>
        				<li><a href="calendar2.html"><i class="icon-star"></i>Calendar2</a></li>
        				<li><a href="manageClasses.html"><i class="icon-font"></i>classes</a></li>
        				<li><a href="contact.html"><i class="icon-envelope"></i> Contact Us</a></li>
      				</ul>
       	 		<a data-rel="close">Close Panel</a>
   		</div><!-- /panel -->
   		
		<div data-role="content">
			<div class="live-tile app accent green exclude">
    			<div>front</div>
    			<div>back</div>
			</div>
				<script type="text/javascript">
    				$(document).ready(function(){
        			$(".live-tile").liveTile();
    				});
				</script>
				
			<div class="live-tile app accent green exclude">
    			<div>front</div>
    			<div>back</div>
			</div>
				<script type="text/javascript">
    				$(document).ready(function(){
        			$(".live-tile").liveTile();
    				});
				</script>
			
						<div class="live-tile app accent green exclude">
    			<div>front</div>
    			<div>back</div>
			</div>
				<script type="text/javascript">
    				$(document).ready(function(){
        			$(".live-tile").liveTile();
    				});
				</script>
			
						<div class="live-tile app accent green exclude">
    			<div>front</div>
    			<div>back</div>
			</div>
				<script type="text/javascript">
    				$(document).ready(function(){
        			$(".live-tile").liveTile();
    				});
				</script>
		<h1>page content</h1>
		</div>
	</div>

</body>
</html>